<template>
	<div class="container">
		<div class="">
			<div class="logo-search">
				<div class="nav-logo">
					<router-link to="/"><img src="../../assets/images/logo.png"/></router-link>
				</div>
				<div class="search">
					<div class="search-input">
						<input type="text" v-model="searchContent" @keydown.enter="onSearch" :placeholder="$t('message.inputKey')" />
						<div class="search-wrap">
							<div class="search-btn btn-gradient" @click="onSearch">{{$t('message.search')}}</div>
						</div>
					</div>
          <!-- 热门搜索 -->
					<div class="search-text">
						<ul>
							<li v-for="(item, index) in hotList" :class="{'search-no-padding-left': index === 0, 'search-no-right': index === hotList.length-1}">
	              <router-link :to="{path: '/search', query: {keyWord: item.name}}">{{ item.name }}</router-link>
	            </li>
						</ul>
					</div>
				</div>
			</div>
			<the-header-nav :nav="nav"></the-header-nav>
		</div>
		<div class="nav">
			<div class="page-top-fixed" v-if="scrolled > 160">
				<div class="page-top-fixed-container">
					<the-header-nav :nav="nav"></the-header-nav>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import TheHeaderNav from '@/components/base/TheHeaderNav'

export default {
  name: 'TheHeaderBottom',
  components: {
    TheHeaderNav
  },
  data () {
    return {
      searchContent: '',
      hotList: [],
      nav: [],
      scrolled: 0
    }
  },
  methods: {
    onSearch () {
      if (!/^\s*$/g.test(this.searchContent)) {
        this.$router.push({path: '/search', query: {keyWord: this.searchContent}})
      } else {
        console.log('没有输入内容')
      }
    },
    handleScroll () {
      this.scrolled = document.documentElement.scrollTop || document.body.scrollTop
    },
    // 获得导航条数据
    getNavList () {
      let t = window.localStorage.getItem('thaiPayMallLanguage')
      var type
      if (t) {
        if (t === 'cn') {
          type = 1
        } else if (t === 'en') {
          type = 3
        } else {
          type = 2
        }
      } else {
        type = 2
      }
      this.$ajax.getNavList(type).then((res) => {
        if (res.code === 200) {
          this.nav = res.data
        }
      })
    }
  },
  created () {
    this.$ajax.hotSearch().then((res) => {
      if (res.code === 200) {
        this.hotList = res.data
      } else if (res.data === 202) {
        console.log('请求数据失败数据为空')
      }
    })
    this.getNavList()
    window.addEventListener('scroll', this.handleScroll)
  },
  activated () {
    this.getNavList()
  }
}
</script>

<style scoped>
.nav {
	position: relative;
}

.logo-search {
	width: 1200px;
	margin: 0 auto;
	height: 120px;
	overflow: hidden;
}

.nav-logo {
	float: left;
	width: 294px;
	height: 54px;
	margin-top: 33px;
}

.nav-logo img {
	width: 100%;
	height: 100%;
}

.search {
	width: 480px;
	margin-top: 30px;
	float: right;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.search-input {
	width: 480px;
	height: 50px;
}

.search-input > input {
	width: 400px;
	height: 50px;
	float: left;
	box-sizing: border-box;
	border: 2px solid #ff9645;
	border-right: 0;
	border-top-left-radius: 25px;
	border-bottom-left-radius: 24px;
	background: url(../../assets/images/icon_search.png) no-repeat 14px center;
	padding: 0 14px 0 46px;
	font-size: 14px;
}

.search-input > input:focus {
  border-color: #ff9645;
}

.search-wrap {
  float: left;
  width: 80px;
  height: 50px;
  border-top-right-radius: 25px;
  border-bottom-right-radius: 25px;
  box-sizing: border-box;
  overflow: hidden;
}

.search-btn {
	width: 80px;
	height: 50px;
	line-height: 50px;
	box-sizing: border-box;
	border-top-right-radius: 25px;
	border-bottom-right-radius: 25px;
	font-size: 16px;
	color: #fff;
	text-align: center;
	cursor: pointer;
}

.search-text {
	margin-top: 8px;
}

.search-text ul {
	overflow: hidden;
}

.search-text li {
	float: left;
	height: 14px;
	border-right: 1px solid #c1c1c1;
	padding: 0 18px;
}

.search-text a {
	font-size: 12px;
	display: block;
	height: 14px;
	line-height: 14px;
	color: #a5a5a5;
}

.search-text .search-no-padding-left {
	padding-left: 0;
}

.search-text .search-no-right {
	padding-right: 0;
	border-right: none;
}

.page-top-fixed {
	/*width: 100%;*/
	min-width: 1200px;
	background-color: #fff;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 99;
}

.page-top-fixed-container {
	min-width: 1200px;
	margin: 0 auto;
}
</style>
